<script lang="ts">
    import {bem} from "@/common/util";
    import mixin from "@/uni_modules/u-tools/mixin/mixin";
    import mpMixin from "@/uni_modules/u-tools/mixin/mpMixin";
    import props from "./props";

    export default {
        name: "u-slider",
        // 组件
        components: {},
        // 混合
        mixins: [props, mixin, mpMixin],
        // 事件
        emits: ["update:value", "onload", "changing", "change"],
        // 数据
        data()
        {
            return {
                // 滑块值
                sliderValue: 0
            };
        },
        // 监听器
        watch: {
            // 监听滑块的值
            value(value: string | number): void
            {
                this.sliderValue = Number(value);
            }
        },
        // 页面挂载
        mounted()
        {
            // 组件挂载完成
            this.$nextTick(() =>
            {
                // 获取当前滑块的值
                this.sliderValue = Number(this.value);

                // 判断是否触发change事件
                if (this.trigger)
                {
                    // 触发自定义change事件
                    this.$emit("change", this.sliderValue);
                }

                // 触发onload事件
                this.$emit("onload", this.sliderValue);
            });
        },
        // 计算函数
        computed: {
            // 生成bem风格的类名
            bemClass(): string
            {
                return bem("slider", [
                    this.disabled ? "disabled" : ""
                ]);
            }
        },
        // 方法
        methods: {
            // 拖拽过程中触发
            changingHandler(event: Record<string, any>): void
            {
                this.changeValue({type: "changing", event});
            },
            // 拖拽完成后触发
            changeHandler(event: Record<string, any>): void
            {
                this.changeValue({type: "change", event});
            },
            // 事件触发
            changeValue(argumentList: Record<string, any>): void
            {
                // 解构事件
                const {type, event} = argumentList || {};

                // 解构滑块的值
                const {value} = event.detail || {};

                // 更新双向绑定的值
                this.$emit("update:value", value);

                // 触发自定义事件
                this.$emit(type, value);

                // 阻止冒泡
                this.stop && this.stopPropagation(event);

                // 阻止事件默认行为
                this.prevent && this.preventDefault(event);
            }
        }
    };
</script>

<template>
    <!-- 滑块框组件 -->
    <view
        :class="[
            bemClass,
            customClass
        ]"
        :name="name"
        :style="[customStyle]"
    >
        <!-- 滑块 -->
        <slider
            :active-color="activeColor"
            :background-color="backgroundColor"
            :block-color="blockColor"
            :block-size="parseFloat(blockSize.toString())"
            :disabled="disabled"
            :max="max"
            :min="min"
            :show-value="showValue"
            :step="step"
            :value="sliderValue"
            @change="changeHandler"
            @changing="changingHandler"
        />
        <!-- //滑块 -->
    </view>
    <!-- //滑块框组件 -->
</template>

<style lang="scss" scoped>
    .u-slider
    {
        // 禁用
        &-disabled
        {
            opacity: 0.5;
        }
    }
</style>